<!--
reference : http://api.jquery.com/
-->
<html>
	<head>	
    	<link rel="stylesheet" href="themes/swanky-purse/jquery.ui.all.css">
    	<script src="jquery.js"></script>	
		<script src="ui/jquery.ui.core.js"></script>
		<script src="ui/jquery.ui.widget.js"></script>
		<script src="ui/jquery.ui.datepicker.js"></script>
        <style>
			body
			{
				margin:0px;
				padding:0px;
			}
			.ui-widget
			{
				font-size:60%;
			}
			.header
			{
				width:100%;
				height:150px;
				background-color:#F00;
			}
			.err
			{
				background-color:#F00;
			}
			.succ
			{
				background-color:#0F0;
			}
		</style>
        <script>
			$(document).ready(
				function()
				{
					/*alert("Hello meldut");*/
					$("#txtButton").click(function(){
						//$("#txtInput").val("meldut");
						//var str = $("#txtInput").val();
						//var str = $("#txtInput").attr("value");
						//alert(str);
						var d = $("#txtInput:visible");
						if(d.length != 0)
							$("#txtInput").hide();
						else
							$("#txtInput").show();
						$("#errMsg").html("Error boy");
						});
					$("#btnFade").live("click",function(){
							/*var d = $(".header:visible");
							if(d.length != 0)
								//$(".header").slideUp('fast');
								//$(".header").fadeOut('fast');
								$(".header").animate({    
									height: 'toggle',
									opacity:0
									});
							else
								//$(".header").slideDown('fast');
								//$(".header").fadeIn('fast');
								$(".header").animate({    
									height: 'toggle',
									opacity:1
									});*/
							if($(".header").hasClass("err"))
							{
								$(".header").removeClass("err");									
								$(".header").addClass("succ");						
							}
							else
							{
								$(".header").removeClass("succ");									
								$(".header").addClass("err");	
							}
					});
					$( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
				}
			);
			
		</script>
    </head>
    <body>
    	<div class="header err">
        </div>
        <div class="content">
    	<form>
        	<table>
            	<tr>
                	<td>Input</td>
                    <td><input type="text" id="txtInput" class="datepicker" /></td>
                </tr>
            	<tr>
                	<td colspan="2">
                    	<input type="button" id="txtButton" value="Click Me!" />
                    	<input type="button" id="btnFade" value="Fade!" />
                    </td>
                </tr>
            	<tr>
                	<td colspan="2">
                    	<div id="errMsg"></div>
                    </td>
                </tr>
            </table>
        </form>
        </div>
    </body>
</html>